<template>
	<view class="city-discovery">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">城市探索</text>
		</view>

		<view style="height: auto; width: 320px; margin: auto; ">

			<swiper indicator-dots autoplay interval="3000">
				<!-- 轮播项，每个 swiper-item 对应一张图片 -->
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.imageUrl" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 城市介绍 -->
		<view class="city-intro">
			<text class="intro-title">泉州介绍</text>
			<text class="intro-content">海上丝绸之路起点 - 泉州</text>
			<text class="intro-desc">
				历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代海上丝绸之路的"起点"，宋元时期被誉为"东方第一大港"。
				著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
				特色文化：南音南戏、木偶戏和闽南建筑等丰富的非物质文化遗产。
			</text>
		</view>

		<!-- 探索进度 -->
		<view class="progress">
			<text class="progress-title">探索进度</text>
			<text class="progress-subtitle">当前进度: 60%</text>
			<view class="progress-bar">
				<view class="progress-inner" :style="{ width: '60%' }"></view>
			</view>
			<text class="progress-percent">60%</text>
		</view>

		<!-- 选择城市 -->
		<view class="select-city">
			<text class="select-title">选择城市</text>
			<text class="city-path">当前选择: 福建省 - 泉州市 - 丰泽区</text>
		</view>

		<!-- 泉州宣传视频区域 -->
		<view class="quanzhou-promotion">
			<text class="promotion-title">泉州宣传</text>
			<!-- 视频播放 -->
			<video src="/static/city-vi.mp4" controls="true" play-btn-position autoplay></video>
			<!-- 播放进度显示 -->
			<view class="video-progress">
				<text>{{ formatTime(currentTime) }} / {{ formatTime(videoDuration) }}</text>
			</view>
		</view>

		<!-- 泉州背景音乐区域 -->
		<view class="quanzhou-music">

			<text class="music-title">泉州背景音乐</text>

			<!-- 播放按钮 -->
			<button @click="playMusic" class="play-btn">{{ isPlaying ? '暂停' : '播放' }}</button>
			<text class="music-desc">泉州南音 - 泉州传统乐剧</text>
			<!-- 音乐进度条 -->
			<view class="music-progress">
				<slider :value="musicProgress" @change="onMusicProgressChange" min="0" max="100"></slider>
				<text>{{ formatTime(musicCurrentTime) }} / {{ formatTime(musicDuration) }}</text>
			</view>
		</view>

		<!-- 偏好设置区域 -->
		<view class="preference">
			<text class="preference-title">偏好设置</text>
			<view class="travel-way">
				<text class="way-title">出行方式</text>
				<radio-group @change="onTravelWayChange">
					<label>
						<radio value="bus" :checked="travelWay === 'bus'">公交</radio>
					</label>
					<label>
						<radio value="self" :checked="travelWay === 'self'">自驾</radio>
					</label>
					<label>
						<radio value="walk" :checked="travelWay === 'walk'">步行</radio>
					</label>
				</radio-group>
			</view>
			<view class="show-recommend">
				<text class="show-title">显示推荐景点</text>
				<switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
			</view>
			<view class="search-radius">
				<text class="radius-title">探索半径: {{ searchRadius }}km</text>
				<slider :value="searchRadius" @change="onSearchRadiusChange" min="1" max="20"></slider>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 视频相关数据
				videoUrl: '/static/city-vi.mp4', // 视频资源路径
				videoDuration: 64, // 视频总时长（秒）
				currentTime: 0, // 视频当前播放时间（秒）

				// 音乐相关数据
				musicUrl: '/static/city-music.mp3', // 音乐资源路径
				musicDuration: 180, // 音乐总时长（秒）
				musicCurrentTime: 0, // 音乐当前播放时间（秒）
				musicProgress: 0, // 音乐播放进度（0-100）
				isPlaying: false, // 音乐是否正在播放
				musicInstance: null, // 音乐实例

				// 偏好设置数据
				travelWay: 'bus', // 出行方式，默认公交
				showRecommend: true, // 是否显示推荐景点
				searchRadius: 12, // 探索半径，默认12km

				swiperList: [{
						imageUrl: '/static/city1.png'
					},
					{
						imageUrl: '/static/city2.jpg'
					},
					{
						imageUrl: '/static/city3.jpg'
					},
					{
						imageUrl: '/static/city4.jpg'
					},
					{
						imageUrl: '/static/city5.jpg'
					},

				]
			};
		},
		onLoad() {
			// 创建音乐实例
			this.musicInstance = uni.createInnerAudioContext();
			this.musicInstance.src = this.musicUrl;
			this.musicInstance.onTimeUpdate(() => {
				this.musicCurrentTime = this.musicInstance.currentTime;
				this.musicProgress = (this.musicCurrentTime / this.musicDuration) * 100;
			});
			this.musicInstance.onEnded(() => {
				this.isPlaying = false;
				this.musicCurrentTime = 0;
				this.musicProgress = 0;
			});
		},
		methods: {
			// 视频时间更新
			onTimeUpdate(e) {
				this.currentTime = e.detail.currentTime;
			},
			// 视频播放结束
			onVideoEnded() {
				this.currentTime = 0;
			},
			// 格式化时间（秒转分:秒）
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},
			// 播放/暂停音乐
			playMusic() {
				if (this.isPlaying) {
					this.musicInstance.pause();
				} else {
					this.musicInstance.play();
				}
				this.isPlaying = !this.isPlaying;
			},
			// 音乐进度改变
			onMusicProgressChange(e) {
				const progress = e.detail.value;
				const time = (progress / 100) * this.musicDuration;
				this.musicInstance.seek(time);
			},
			// 出行方式改变
			onTravelWayChange(e) {
				this.travelWay = e.detail.value;
			},
			// 显示推荐景点开关改变
			onShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			// 探索半径改变
			onSearchRadiusChange(e) {
				this.searchRadius = e.detail.value;
			},
		},
		onUnload() {
			// 页面卸载时销毁音乐实例
			if (this.musicInstance) {
				this.musicInstance.destroy();
			}
		},
	};
</script>

<style scoped>
	.city-discovery {
		padding: 15px;
		background-color: #f9f9f9;

	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 44px;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.city-img {
		width: 100%;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.city-intro {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.intro-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
		color: #333;
	}

	.intro-content {
		font-size: 14px;
		color: #007AFF;
		margin-bottom: 8px;
		display: block;
	}

	.intro-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.progress {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.progress-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
		color: #333;
	}

	.progress-subtitle {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		display: block;
	}

	.progress-bar {
		width: 100%;
		height: 10px;
		background-color: #eee;
		border-radius: 5px;
		overflow: hidden;
	}

	.progress-inner {
		height: 100%;
		background-color: #007AFF;
		border-radius: 5px;
		transition: width 0.3s ease;
	}

	.progress-percent {
		font-size: 14px;
		color: #007AFF;
		margin-top: 5px;
		display: block;
		text-align: right;
	}

	.select-city {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.select-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
		color: #333;
	}

	.city-path {
		font-size: 14px;
		color: #333;
		padding: 8px;
		background-color: #f5f5f5;
		border-radius: 4px;
		display: block;
	}

	/* 泉州宣传区域样式 */
	.quanzhou-promotion,
	.quanzhou-music,
	.preference {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.promotion-title,
	.music-title,
	.preference-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		color: #333;
	}

	.promo-video {
		width: 100%;
		height: auto;
		border-radius: 4px;
	}

	.video-progress,
	.music-progress {
		margin-top: 10px;
		font-size: 14px;
		color: #666;
	}

	.play-btn {
		background-color: #007AFF;
		color: #fff;
		padding: 8px 16px;
		border-radius: 4px;
		border: none;
		margin-bottom: 10px;
	}

	.music-desc {
		display: block;
		margin-bottom: 10px;
		font-size: 14px;
		color: #666;
		 
	}

	/* 偏好设置样式 */
	.travel-way,
	.show-recommend,
	.search-radius {
		margin-bottom: 15px;
	}

	.way-title,
	.show-title,
	.radius-title {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		color: #333;
	}

	radio-group {
		display: flex;
		flex-wrap: wrap;
	}

	label {
		margin-right: 15px;
		margin-bottom: 8px;
		font-size: 14px;
		color: #333;
	}

	slider {
		width: 100%;
		margin-top: 5px;
	}

	.show-recommend {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>